<template>
	<!-- 登录 -->

	<!-- 整体背景 -->
	<div class="login-view">

	</div>
	<!-- 遮罩 -->
	<div class="make">

	</div>

	<!-- 返回按钮 -->
	<van-icon name="arrow-left"size="40" class="icon" @click="router.back()"/>

  	<!-- 登录表单 -->
  <div class="login" >  
			
    		<div class="logo"></div>
			<div class="phone">
				<input v-model="username" type="text"  placeholder="输入用户名">
			</div >
			<div class="check flex-row-between">
				<div><input v-model="password" type="password"  placeholder="输入密码" ></div>
				<!-- <div>获取验证码</div> -->
			</div>
			<div class="mor flex-row">
				
			</div>
			<div class= "an" @click="login">
				登录
			</div>
			<!-- 跳转到注册 -->
			<div class="mo flex-row-center">
				<a @click="register">没有账号 注册></a>
			</div>
  </div>

</template>

<script setup lang="ts">
	//引入
    import API from "../api";
    import { useUserStore } from '../store'
	let useStore = useUserStore();
	let router = useRouter();
    let username = ref('');
    let password = ref('');

  
    //登录方法
    async function login(){
        // console.log(username,password);
		//校验用户名字和密码
        if(username.value == ''){
            console.log("11");
            
            showFailToast(`用户名不能为空`);
            return;
        };
        if(password.value == ''){
            showFailToast(`密码不能为空`);
            return;
        };
		//请求登录方法
        let even = await API.getUserData('/api_user',{
            status: 'login',
			username: username.value,
			password: password.value
        });
		//校验参数
        if(even.code != 0){
			showFailToast(`用户名或密码错误！`);
			return;
		};
        showSuccessToast(`登录成功`);
		// 设置登录状态
		window.localStorage.setItem('token', even.user_id);
		window.localStorage.setItem('username', even.username);

        useStore.TOKEN = even.user_id;

        router.push('/index/home');
    };
	//点击跳转到注册
	function register(){
		router.push('/register');
	}

</script>

<style scoped lang="less">
	.icon{
		margin-top: 10px;
		z-index: 10;
	}
	//遮罩
    .make{
        width: 100%;
        height: 100%;
        background:#000;
        z-index: 6;
        opacity: 0.7;

        position: fixed;
    }
    .login{
        z-index: 10;
        position: fixed;
        left: 40px;
      
    }
    .login-view{
        width: 100%;
        height: 100%;
        background: url('http://imgs-qn.iliangcang.com/images/wap/tmp_bg1.jpg') no-repeat 50% 50%;
       
        background-size: cover;
        position: fixed;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        z-index: -10;
    }


//登录表单
.login{
	
	margin: 10px auto;
}
.logo{
	width:206px;
	height:202px;
	background: url("http://a.iliangcang.com/images/wap/logreg-logo206-202.png");
	margin: 60px auto;
}
.phone{
	    /* border-bottom: solid 1px #000;
	    font-size: 18px;
	    width: 265px;
	    height: 34px;
	    background: url(../img/nlphone.png) no-repeat 0px 6px;
	    padding-left: 35px; */
		border-bottom: solid 1px white;
		
}
//账号输入框
.phone>input{
	color: white;
	font-size: 18px;
	width: 265px;
	height: 34px;
	background: url(http://imgs-qn.iliangcang.com/images/wap/user-icon36_42.png) no-repeat 0px 6px;
	padding-left: 35px;
    background-size: 15px 19px;
	border:none;
	outline: none;
}

.check{
	margin-top:20px;
}
.check div>:nth-child(1){
	border-bottom: solid 1px white;
}
//密码输入框
.check>div>input{
    color: white;
	font-size: 18px;
	width: 265px;
	height: 34px;
	padding-left: 35px;
	background: url(http://imgs-qn.iliangcang.com/images/wap/pwd-icon36_42.png) no-repeat 0px 6px;
	border:none;
    background-size: 15px 19px;
	outline: none;
}



.check :nth-child(2){
	width: 112px;
	height: 34px;
	text-align: center;
	line-height: 34px;
	border: 1px solid #000;
	border-radius: 5px;
}

.mor{
	margin-top: 20px; 
}
.mor :nth-child(2){
	margin-left: 5px;
	font-size: 13px;
}

.an{
	width: 300px;
	height: 50px;
	background: #000;
	text-align: center;
	color:white;
	border-radius: 4px;
	font-weight: normal;
	font-size: 18px;
	margin-top: 30px;
	line-height:50px;
	cursor: pointer;
}

.mo{
	margin-top: 30px;
    color: white;
}

</style>